<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>01-VueRouter的使用</title>
  </head>
  <body>
    <div id="app">
      <h1>vue的例子</h1>
      <p>{{msg}}</p>
      <hr />
      <a href="#/home">主页面</a>
      <a href="#/one">one页面</a>
      <a href="#/two">two页面</a>
      <router-view></router-view>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
      Vue.config.productionTip = false // 关闭生产提示
      const Home = {
        template: `
            <div>
                <h3>这是主页的标题</h3>
            </div>
        `,
      }
      const One = {
        template: `
            <div>
                <h3>这是One页面的标题</h3>
            </div>
        `,
      }
      const Two = {
        template: `
            <div>
                <h3>这是Two页面的标题</h3>
            </div>
        `,
      }
      const router = new VueRouter({
        routes: [
          { path: '/home', component: Home },
          { path: '/one', component: One },
          { path: '/two', component: Two },
        ],
      })
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello',
        },
        router,
      })
    </script>
  </body>
</html>
